<template>
	<view class="Box">
		<!-- 轮播图部分 -->
		<view class="u-demo-block">
			<u-swiper :list="list" @change="e => current = e.current" :autoplay="true">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
			<u-gap bgColor="transparent" height="15"></u-gap>
		</view>

		<!-- 价格那面 -->
		<view class="price">
			<view class="p1">
				<p>￥239</p>
			</view>
			<view class="p2">
				<p>价格 <span>￥799</span></p>
			</view>
			<view class="p3">
				<p>*使用10公里徒步里程可减100元，到手价139</p>
			</view>
			<view class="p4">
				<p>女童经典长款中厚羽绒服-宝石紫</p>
			</view>
			<view class="p5">
				<p>快递：8.00</p>
				<p>已售 389</p>
				<p>苏州</p>
			</view>
		</view>

		<!-- 服务 -->
		<view class="service">
			<view class="service-f">
				<p>服务</p>
			</view>
			<view class="service-g">
				<view class="box-a">
					<view class="">
						<u-icon name="checkbox-mark"></u-icon>
						<p>满100元包邮</p>
					</view>
					<view class="">
						<u-icon name="checkbox-mark"></u-icon>
						<p>新用户首单免费</p>
					</view>
				</view>
				<view class="box-b">
					<view class="">
						<u-icon name="checkbox-mark"></u-icon>
						<p>正品保证</p>
					</view>
					<view class="">
						<u-icon name="checkbox-mark"></u-icon>
						<p>7天无理由退货</p>
					</view>
				</view>
			</view>
		</view>

		<!-- 参数 -->
		<view class="parameter">
			<view class="parameter-a">
				<p>参数</p>
			</view>
			<view class="box">
				<view class="box1">
					<p>上市时间</p>
					<p>使用对象</p>
					<p>商品系列</p>
					<p>材质</p>
					<p>适用季节</p>
				</view>
				<view class="box2">
					<p>2017年秋季</p>
					<p>情侣</p>
					<p>城市户外</p>
					<p>涤纶</p>
					<p>四级</p>
				</view>

			</view>
		</view>

		<!-- 详情 -->
		<view class="details">
			<view class="box1">
				<p>详情</p>
			</view>
			<view class="img">
				<!-- 这里放详情图片 -->
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="bottom">
			<!-- 客服 收藏-->
			<view class="collect">
				<view class="box" @click="service">
					<u-icon name="server-man" labelPos='center' size='30'></u-icon>
					<p>客服</p>
				</view>
				<view class="box">
					<u-icon name="star-fill" labelPos='center' size='30' color="yellow"></u-icon>
					<p>收藏</p>
				</view>
			</view>
			<!-- 加入购物车 立即购买 -->
			<view class="purchase">
				<view class="cart" @click="join()">
					<p>加入购物车</p>
				</view>
				<view class="buy" @click="purchase()">
					<p>立即购买</p>
				</view>
			</view>
		</view>
		
		
		<!-- 购物车 -->
		<Shoppingcart :show='show' @b='fun'></Shoppingcart>	
		<!-- 立即购买 -->
		<Purchase :show1='show1' @b='fun1'></Purchase>
	</view>

</template>

<script>
	import Shoppingcart from "./child/Shoppingcart.vue"
	import Purchase from "./child/Purchase.vue"
	export default {
		data() {
			return {
				list: [ //轮播的图片地址
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				show: false,
				show1:false,
				id : 1, //这是传过来的那个ID
			}
		},
		
		// /接收路由传过来的参数
		onLoad(event) {
			// this.sortSelect = JSON.parse(event.sort)
		},
		
		
		
		methods:{
			// 父组件传子组件显示弹框
			join(){
				this.show = true
			},
			purchase(){
				this.show1 = true
			},
			// 子组件传父组件取消显示弹框；
			fun(data){
				this.show = data
			},
			fun1(data){
				this.show1 = data
			},
			// 跳转客服页面
			service(){
				console.log('ddd');
				uni.navigateTo({
					url: './Customerservice'
				});
			}
		},
		components:{
			Shoppingcart,
			Purchase
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2
	}

	// 轮播图样式
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	// 价格
	.price {
		width: 750rpx;
		height: 300rpx;
		margin-top: -27rpx;
		background-color: #fff;

		.p1 {
			width: 750rpx;
			height: 60rpx;
			// background-color: aqua;
			display: flex;
			align-items: center;

			p {
				font-size: 50rpx;
				color: #e5412b;
				margin-left: 20rpx;
			}
		}

		.p2 {
			width: 750px;
			height: 40rpx;

			// background-color: aqua;
			p {
				color: #a69999;
				font-size: 25rpx;
				margin-left: 20rpx;

				span {
					text-decoration: line-through;
					font-size: 30rpx;
				}
			}
		}

		.p3 {
			width: 750rpx;
			height: 30rpx;

			p {
				font-size: 20rpx;
				margin-left: 20rpx;
				margin-top: 10rpx;
				color: #ff0000;
			}
		}

		.p4 {
			width: 750rpx;
			height: 50rpx;

			p {
				margin-left: 20rpx;
			}
		}

		.p5 {
			padding: 20rpx;
			width: 710rpx;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			p {
				font-size: 25rpx;
			}
		}
	}

	// 服务
	.service {
		margin-top: 25rpx;
		width: 750rpx;
		height: 150rpx;
		background-color: #fff;
		display: flex;

		.service-f {
			width: 100rpx;
			height: 150rpx;

			p {
				margin-top: 35rpx;
				text-align: center;
			}
		}

		.service-g {
			width: 650rpx;
			height: 150rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.box-a {
				width: 650rpx;
				height: 75rpx;
				display: flex;
				align-items: flex-end;

				view {
					display: flex;

					p {
						font-size: 25rpx;
						width: 170rpx;
					}
				}
			}

			.box-b {
				width: 650rpx;
				height: 75rpx;
				display: flex;
				align-items: flex-start;

				view {
					display: flex;

					p {
						font-size: 25rpx;
						width: 170rpx;
					}
				}
			}
		}
	}

	// 参数
	.parameter {
		width: 750rpx;
		height: 300rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.parameter-a {
			width: 750rpx;
			height: 40rpx;
			display: flex;
			align-items: center;

			p {
				margin-left: 20rpx;
			}

		}

		.box {
			width: 750rpx;
			height: 260rpx;
			background-color: #fff;
			display: flex;

			.box1 {
				height: 260rpx;
				width: 120rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				align-items: center;

				p {
					text-align: right;
					width: 120rpx;
					font-size: 25rpx;
					color: #a39f9c;
				}
			}

			.box2 {
				height: 260rpx;
				width: 620rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding-left: 30rpx;

				p {
					width: 650rpx;
					font-size: 25rpx;
				}
			}
		}
	}

	// 详情
	.details {
		width: 750rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.box1 {
			width: 750rpx;
			height: 100rpx;

			p {
				margin-left: 20rpx;
				line-height: 100rpx;
			}
		}
		.img {
			width: 750rpx;
			height: 300rpx;
			background-color: red;
		}
	}

	// 底部
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fefefe;
		border-top: 1rpx solid #e3e3e4;
		height: 110rpx;
		display: flex;
		.collect{
			width: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.box{
				flex: 1;
				p{
					text-align: center;
					font-size: 25rpx;
				}
			}
		}
		.purchase{
			flex: 1;
			background-color: red;
			display: flex;
			.cart{
				flex: 1;
				background-color: #ff0000;
				display: flex;
				align-items: center;
				justify-content: center;
				p{
					color: #fff;
				}
			}
			.buy{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #333333;
				p{
					color: #fff;
				}
			}
		}
	}

</style>
